<template>
  <el-dialog
    title="查看租期"
    :visible.sync="dialogVisible"
    width="1000px"
  >
    <el-table :data="tableData" border>
      <el-table-column
        label="订单"
        prop="trade_no"
        width="120"
      ></el-table-column>
      <el-table-column align="center" label="期数" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.which_period }}/{{ scope.row.month_total }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="租期" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.begin_time }} 至 {{ scope.row.end_time }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="租金" width="120">
        <template slot-scope="scope">
          <span>￥{{ scope.row.rent }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.status == 0 || scope.row.status == 4 ? '' : 'success'"
            >{{
              scope.row.status == 1
                ? "已支付"
                : scope.row.status == 2
                ? "已退款"
                : scope.row.status == 3
                ? "已买断"
                : scope.row.status == 4
                ? "已逾期"
                : scope.row.status == 5
                ? "线下支付"
                : "未支付"
            }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="支付时间"
        prop="pay_time"
        width="100"
      ></el-table-column>
      <el-table-column
        align="center"
        label="预计扣款日"
        prop="begin_time"
        width="100"
      ></el-table-column>
      <el-table-column align="center" label="流水号" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.pay_time ? scope.row.alipay_trade_no : "" }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="自动扣款功能">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.withhold_status"
            active-color="#2993FF"
            inactive-color="#666666"
            :active-value="1"
            :inactive-value="2"
            @change="switchChange(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="viewLog(scope.row)"
            >查看记录</el-button
          >
          <el-button
            v-if="
              scope.row.is_withhold == 1 &&
              scope.row.pay_type != 1 &&
              $hasMethod('#withhold')
            "
            type="warning"
            size="mini"
            @click="withholdItem(scope.row)"
            >发起代扣</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
    </div>
    <deduct-log
      ref="deductLog"
      :order-no="selectedItem.trade_no"
      :lease-id="selectedItem.id"
    ></deduct-log>
  </el-dialog>
</template>

<script>
import { getLease } from "@/api/order";
import { manualWithholding, withholdSwitch } from "@/api/finance";
import deductLog from "./deductLog";
export default {
  props: ["orderId"],
  components: { deductLog },
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      selectedItem: {},
    };
  },
  methods: {
    switchChange(row) {
      withholdSwitch({
        orderId: row.order_id,
        leaseId: row.id,
        withholdStatus: row.withhold_status,
      }).then((res) => {
        this.$parent.getList(true);
      });
    },
    viewLog(row) {
      this.selectedItem = { ...row };
      this.$refs.deductLog.dialogVisible = true;
    },
    withholdItem(row) {
      this.$confirm("您确定要发起代扣吗？", "发起代扣", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          manualWithholding({
            orderId: row.order_id,
            leaseId: row.id,
          }).then((res) => {
            setTimeout(() => {
              this.$parent.getList(true);
            }, 1000);
          });
        })
        .catch(() => {});
    },
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        getLease(this.orderId).then((res) => {
          this.tableData = res || [];
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.el-dialog__body {
  max-height: 650px;
  overflow: auto;
}
</style>